<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" id="htmlcuatrang">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
#menu { width:180px;  background-color:#CC6;}
#menu .theloai {background-color:#F63; color:#9FC; display:block; padding-top:5px; padding-bottom:5px;}
#menu  a { color:#C09; padding-top:3px; padding-bottom:3px; padding-left:15px; display:block; border-bottom: solid 1px #CF0; text-decoration:none;}
#test p:first-child{ margin-top:0px}
.tosang{ background-color:#663}
.abc{ color:#9C0}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script>
$(document).ready(function(){	
	$("#btn1").click(function(){
		
		//tt = $("#test p:last").attr("thutu"); alert(tt);
		
		//h = $("#test").html();	alert(h);
		//$("#test").html("<p>Loài bướm biết tìm thuốc để chữa bệnh</p>");	
		
		//t = $("#test").text();
		//alert(t);
		
		//v = $("#lang").val(); alert(v);
		//v = $("#TenTL").val(); alert(v);
		
		//cao = $("#test").height();
		//alert(cao);	
		
		//rong=  $("#test p span:first").width();
		//alert(rong);
		
		//$("#test").addClass('abc');
		
		//$("#test").removeClass("tosang");
		
		//$("#test p:last").after("<p>Hành trình kỳ lạ của cua đỏ</p>");
		
		//$("#test p:last").before("<p>Hành trình kỳ lạ của cua đỏ</p>");
		
		//$("#test p:last").append(" chúng ta");

		//$("#test p:last").prepend("Hình ảnh ");
		
		//$("<p>Loài ếch nhỏ bằng hạt đậu</p>").appendTo("#test");
		
		//$("#test p:first").detach();
		//$("#test p:first").remove();
		//$("#test p:first").empty();
		
		//if( $("#test").hasClass("tosang")==true) alert("OK")	
		//else alert("not OK");
		
		//L = $("#test").offset().left;
		//T = $("#test").offset().top;
		//alert(L +" " + T);
		
		//T =$("#footer").offset().top;
		//$(window).scrollTop(T);
		
		//$("#demo").scrollTop(100); 
		
	});
	
});
</script>
</head>

<body id="bodycuatrang">

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td valign="top">
<div id="test" class="tosang">
<p thutu=1><span>Hang động kỳ vĩ tại Việt Nam</span> </p>
<p thutu=2>Bí ẩn về loài cá biết bay</p>
<p thutu=3>5 ngọn núi phun lửa lâu nhất hành tinh</p>
</div>
</td>
<td valign="top">
<select id="lang" style="background-color:#9C6">
<option value="1">Tin xã hội</option>
<option value="2">Nghệ thuật sống</option>
<option value="3">Kinh tế</option>
<option value="4">Văn hóa</option>
</select><br />
<input type="text" id="TenTL" style="background-color:#F90" />
</td>
</tr>
</table>
<input type="button" id="btn1" value="Nút 1" />
<div id="demo" style="height:150px; width:300px; background-color:#C93; overflow:scroll">
<p>Trời buồn làm gì trời rầu rầu</p>
<p>Anh thương em anh đi đâu đâu</p>
<p>Lắng thấy tiếng suối thấy tiếng khóc</p>
<p>Ảo tưởng chỉ để khổ để tủi</p>
<p>Nghĩ mãi, ngẫm mãi lỗi vẫn lỗi</p>
<p>Thương thay cho em căm thay anh</p>
<p>Tình hoài càng ngày càng tày đình</p>
</div>
<div id="menu">
	Loại tin
  <div idTL=1>
	    <span class="theloai" dautien=1>Tin xã hội</span>
        <div class="loaitin">
            <a id="tt" href="/tintuc/thethao/">Thể <span>thao</span></a> 
            <a href="/tintuc/dulich">Du lịch</a>             
            <a href="#" idLT="5">Xã hội</a>             
            <a id="sk" href="#">Sức khỏe</a>
            <a  href="#">Âm nhạc</a>
        </div>
    </div>
    <div idTL=2 id="theloaiweb">
        <span class="theloai">Thế giới web</span>
        <div class="loaitin" id="loaitinweb">
              <a id="tool" href="#">Tools</a> 
        	  <a href="#">Links</a> 
              <a href="#">Template</a> 
              <a href="#">Document</a> 
        </div>
    </div>
    <div>
        <span class="theloai">Nghệ thuật sống</span>
        <div class="loaitin">
            <a href="#">Sống đẹp</a>
        </div>
    </div>
    <div>
        <span class="theloai">Thư giãn</span>
        <div class="loaitin">
            <a href="#">Thơ hay</a>
            <a href="#">Đố vui</a>  
        </div>
    </div>    
  </div>
  <br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

<div id="footer">Footer</div><br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />

</body>
</html>